<template>
  <view class="container">
    <view class="list-cell b-b m-t d-flex align-items-center" @click="handleUpload" hover-class="cell-hover" :hover-stay-time="50">
      <text class="cell-tit">头像</text>
      <image :src="face" mode="aspectFill" class="face"></image>
      <text class="cell-more yticon icon-you"></text>
    </view>
    <view class="list-cell b-b">
      <text class="cell-tit">昵称</text>
      <input type="text" placeholder="请输入昵称" v-model="nickname" />
    </view>
    <!-- <view class="list-cell b-b">
      <text class="cell-tit">手机</text>
      <input placeholder="请输入手机" type="tel" v-model="form.phone" />
    </view> -->
    <view class="list-cell log-out-btn"><text class="cell-tit" @click="submit">确认设置</text></view>
  </view>
</template>

<script>
import {isEmptyObj} from '../../utils/index.js';
import {  mapState,  mapMutations  } from 'vuex';  
import config from '../../config/index.js';
export default {
  data() {
    return {
       oldinfo:{},
	   serverimg:'',
	   face:'/static/missing-face.png',
	   nickname:'me'
    };
  },
  computed:{
		...mapState('user',['userinfo','token'])
	},
  onShow() {
	  if(!this.token){
	  	return uni.navigateTo({
	  		url:'/pages/public/login'
	  	})
	  }
	  
	  if(!isEmptyObj(this.userinfo)){
		this.face = this.userinfo.face;
		this.serverimg = this.userinfo.face;
		this.nickname = this.userinfo.nickname;
	  }
  },
  onLoad() {
  	//拉取推荐码
	
  },
  methods: {
	  ...mapMutations('user',['setToken','setUserInfo']),
    submit() { //修改
	    //没有任何改动
		if(this.userinfo.nickname==this.nickname && this.userinfo.face==this.serverimg){ 
			return ; 
		}
		var params={
			token:this.token,
		}
		if(this.serverimg){
			params.face = this.serverimg;
		}
		if(this.nickname){
			params.nickname = this.nickname
		}
		console.log(params);
		if(!params.nickname && !params.face) return;
		this.$ajax.get('member/upinfo',params).then(data=>{
			if(0==data.error){
				this.userinfo.face = this.serverimg;
				this.userinfo.nickname = this.nickname;
				this.setUserInfo(this.userinfo);
				this.$api.msg('修改成功');
				setTimeout(function(){
					return uni.switchTab({
						url:'/pages/user/user'
					})
				},800)
			}
		})
	},
    // 上传头像
    handleUpload() {
		let that = this;
        uni.chooseImage({
        count: 1,
        success: res => {
			const tempFilePaths = res.tempFilePaths;
			// TODO 上传
			that.face = tempFilePaths[0];
			const uploadTask = uni.uploadFile({
			      url : config.baseURL+'member/upload',
			      filePath: tempFilePaths[0],
			      name: 'file',
				  formData: {
					'token': that.token
				  },
			      success: function (uploadFileRes) {
					  if(200==uploadFileRes.statusCode){
						  that.serverimg =uploadFileRes.data;
					  }else{
						  that.$api.msg('上传失败');
					  }  
			      },
				  fail: (err) => {
					that.$api.msg('上传失败');
				 }
			});
        },
		error : function(e){
			that.$api.msg('上传失败');
		}
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background: $page-color-base;
}
.list-cell {
  display: flex;
  align-items: center;
  padding: 20upx $page-row-spacing;
  line-height: 60upx;
  position: relative;
  background: #fff;
  justify-content: center;
  &.log-out-btn {
    margin-top: 40upx;
    .cell-tit {
      color: $uni-color-primary;
      text-align: center;
      margin-right: 0;
    }
  }
  &.cell-hover {
    background: #fafafa;
  }
  &.b-b:after {
    left: 30upx;
  }
  &.m-t {
    margin-top: 16upx;
  }
  .cell-more {
    align-self: baseline;
    font-size: $font-lg;
    color: $font-color-light;
    margin-left: 10upx;
  }
  .cell-tit {
    flex: 1;
    font-size: $font-base + 2upx;
    color: $font-color-dark;
    margin-right: 10upx;
  }
  .cell-tip {
    font-size: $font-base;
    color: $font-color-light;
  }
  switch {
    transform: translateX(16upx) scale(0.84);
  }
  input {
    text-align: right;
  }
}
.face {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
</style>
